<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>项目概览</title>
    <style>
        .row{
            display: flex;
        }

        .row  #left-panel{
            width:500px;
        }

        .row  #right-panel{
            flex-grow: 1;
        }

        .feature-list .feature-item{
            height: 40px;
            line-height: 40px;
        }

        #starfield {
            position: relative;
            width: 100%;
            height: 95vh;
            overflow: hidden;
            background:
                radial-gradient(ellipse at 30% 20%,
                    rgba(23, 85, 135, 0.7) 0%,
                    rgba(9, 10, 15, 0.9) 60%),
                radial-gradient(ellipse at 70% 80%,
                    rgba(33, 65, 92, 0.6) 0%,
                    rgba(9, 10, 15, 0.9) 60%),
                linear-gradient(135deg, #090A0F 0%, #1B2735 100%);
        }

        .star {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            animation: twinkle var(--duration) infinite ease-in-out;
            box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);
        }

        .star.large {
            width: 4px;
            height: 4px;
            background: #f5f7d0;
            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5);
        }

        .meteor {
            position: absolute;
            width: 300px;
            height: 1px;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
            transform-origin: left center;
            opacity: 0;
        }

        @keyframes twinkle {
            0%, 100% {
                opacity: 0.3;
                transform: scale(0.9);
            }
            50% {
                opacity: 1;
                transform: scale(1.1);
            }
        }

        @keyframes meteorShower {
            0% {
                transform: translateX(0) translateY(0) rotate(30deg);
                opacity: 1;
            }
            70% {
                opacity: 1;
            }
            100% {
                transform: translateX(1000px) translateY(300px) rotate(30deg);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6" id="left-panel">
                <!-- 原有内容将放在这里 -->
                <div class="main-content">
                    <h2>Flink JAVA 开发培训项目</h2>
                    <p>这是一个基于Spring Boot和Flink的集成开发环境，提供以下功能：</p>

                    <ul class="feature-list">
                        <li class="feature-item">Flink连接器测试功能</li>
                        <li class="feature-item">Table API示例展示</li>
                        <li class="feature-item">数据流处理演示</li>
                        <li class="feature-item">Flink任务管理</li>
                        <li class="feature-item">系统配置管理</li>
                    </ul>

                    <h2>使用说明</h2>
                    <p>1. 通过左侧菜单导航到不同功能模块</p>
                    <p>2. 每个功能会在新标签页中打开</p>
                    <p>3. 点击标签页右上角的"×"可以关闭页签</p>
                    <p>4. 首页标签页不可关闭</p>

                    <h2>参考资料</h2>
                    <p><a href="https://nightlies.apache.org/flink/flink-docs-stable/" target="_blank">Apache Flink官方文档</a></p>
                    <p><a href="https://www.cnblogs.com/lzfhope/p/18956037" target="_blank">Flink对象简介</a></p>
                    <p><a href="https://gitee.com/lu_zhifei/learn-flink/tree/master/java/first-tableapi-spring" target="_blank">本项目源码地址</a></p>
                </div>
            </div>
            <div class="col-md-6" id="right-panel">
                <div id="starfield"></div>
            </div>
        </div>
    </div>

</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const starfield = document.getElementById('starfield');
        const starsCount = 300;

        // 创建银河效果
        const milkyWay = document.createElement('div');
        milkyWay.style.position = 'absolute';
        milkyWay.style.width = '150%';
        milkyWay.style.height = '20%';
        milkyWay.style.top = '40%';
        milkyWay.style.left = '-25%';
        milkyWay.style.background = 'radial-gradient(ellipse at center, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 70%)';
        milkyWay.style.transform = 'rotate(20deg)';
        starfield.appendChild(milkyWay);

        // 创建星星
        for (let i = 0; i < starsCount; i++) {
            const star = document.createElement('div');

            // 10%的星星是大星星
            if (Math.random() < 0.1) {
                star.className = 'star large';
            } else {
                star.className = 'star';
                // 普通星星大小 (1-2px)
                const size = Math.random() + 1;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
            }

            // 随机位置
            star.style.left = `${Math.random() * 100}%`;
            star.style.top = `${Math.random() * 100}%`;

            // 随机动画持续时间 (3-10秒)
            star.style.setProperty('--duration', `${Math.random() * 7 + 3}s`);

            // 随机延迟 (0-8秒)
            star.style.animationDelay = `${Math.random() * 8}s`;

            starfield.appendChild(star);
        }

        // 创建流星
        function createMeteor() {
            const meteor = document.createElement('div');
            meteor.className = 'meteor';
            meteor.style.animation = `meteorShower ${1 + Math.random() * 2}s linear`;
            
            // 随机位置 (从左侧随机位置开始)
            const startY = Math.random() * 100;
            meteor.style.left = `${-100}px`;
            meteor.style.top = `${startY}%`;
            
            // 随机延迟 (0-30秒)
            meteor.style.animationDelay = `${Math.random() * 30}s`;
            
            starfield.appendChild(meteor);
            
            // 动画结束后移除元素
            meteor.addEventListener('animationend', function() {
                meteor.remove();
            });
        }
        
        // 初始创建3个流星
        for (let i = 0; i < 3; i++) {
            createMeteor();
        }
        
        // 每隔10-30秒创建一个新流星
        setInterval(() => {
            createMeteor();
        }, 4000 + Math.random() * 1000);
    });
</script>

</html>